//获取节点
var swiper = document.getElementsByClassName('swiper')[0]
var slide = document.getElementsByClassName('slide')[0]
var items = document.getElementsByClassName('item')

//获取轮播元素的宽度 clientWidth:HTML DOM 只读属性 返回元素的可视宽度
var swiperWidth = swiper.clientWidth
var swiperHeight = swiper.clientHeight

//复制第一张图片插入到末尾  appendChild方法用于在内容末尾插入节点 cloneNode(true) 克隆节点 true为深克隆 false为浅克隆
slide.appendChild(slide.firstChild.cloneNode(true))

//设置最外层轮播长图的宽高,要加上单位 用style设置 css设置不了的再用js设置
//childElementCount 返回的值包含子元素节点的数量，而不是所有子节点（如文本和注释节点）的数量
slide.style.width = swiperWidth * slide.childElementCount +"px"
for (var i = 0; i < items.length; i++) {
    items[i].style.width=swiperWidth + "px"
    items[i].style.height=swiperHeight + "px"
}

//图片过渡 transition用于设置四个属性 分别为：作用的属性名|时长|过渡方式|延迟
//linear线性:动画会以恒定的速度从初始状态过渡到结束状态
//ease缓动:动画考试时逐步加速，中间逐渐减慢，结束时逐步加速
//ease-in-out:动画开始时缓慢，中间逐步加速，结束时逐渐减慢
//display：none==>block无法过度，显示和消失无法过过渡
slide.style.transition = "left 300ms linear"

//轮播下标

var index = 0
//设置左移动方法
// left属性设置或返回定位元素的左部位置
function moveLeft(){
    index++;
    if(index == items.length - 1){ //此时index=2
        slide.style.left = -index * swiperWidth + 'px'
        setTimeout(function (){
            //取消过渡效果
            slide.style.transition=''
            //回到第一张图片
             index = 0;
            slide.style.left = -index * swiperWidth +'px' //此时第一张图片左端的位置为0
            //重新开始轮播 加上过渡效果
            setTimeout(function (){
                slide.style.transition='left 300ms linear'
            },20)
        },300)
    }else{
        slide.style.left= -index * swiperWidth + 'px'
    }
}
//设置右移动
function moveRight(){
    index--;
    if(index == 0){ //此时index=0 位于初始位置
        slide.style.left = -index * swiperWidth + 'px' //左边位置为0
        setTimeout(function (){
            //取消过渡效果
            slide.style.transition=''
            //将第四张图片重新设置为第一张图片
            index = 3;
            slide.style.left = -index * swiperWidth +'px' //此时第一张图片左端的位置为0
            //重新开始轮播 加上过渡效果
            setTimeout(function (){
                slide.style.transition='left 300ms linear'
            },20)
        },300)
    }else{
        slide.style.left= -index * swiperWidth + 'px'
    }
}
//添加时钟事件
var timer;
timer=setInterval(moveLeft,1000)

//设置左右按钮


